<template>
  <div id="app1">
    <div class="container-fluid container-med2" >
      <div class="select1">
        <el-select v-model="value1" placeholder="请选择课程" @change="getClass(value1)">
          <el-option
            v-for="item in options1"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="select2">
        <el-select v-model="value2" placeholder="请选择班级">
          <el-option
            v-for="item in options2"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="btn22">
        <el-form :inline="true">
          <el-form-item>
            <el-button type="primary" @click="teacher_m()" >班级管理</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="collection()" >查看汇总</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="publish(value1)">发布实验</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table :data="tableData1" :row-class-name="tableRowClassName" class="table1" style="width: 100%;" stripe>
      <el-table-column type="index" >
      </el-table-column>
        <el-table-column  label="实验标题" header-align="center">
          <template scope="scope">
              <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" header-align="center">
          <template scope="scope">
              <span>{{ scope.row.startDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="截止时间" header-align="center">
          <template scope="scope">
              <span>{{ scope.row.endDate }}</span>
          </template>
        </el-table-column>    
        <el-table-column label="操作"  header-align="center">
          <template scope="scope">
            <el-button size="small" type="success"  @click.native="teacherCheck(scope.$index, scope.row)">查看</el-button>
            <el-button size="small" type="success"  @click.native="situation(scope.$index, scope.row)">提交情况</el-button>
            <el-button type="danger" size="small" @click="Delete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
  export default {

  data () {
    return {

        options1: [],
        value1: '',

        options2: [],

        value2: '',


        tableData1:[]
      }
    },
  methods: {
    getClass(v){
      this.options2=[];
      for (var i=1;i<this.$store.state.user.course[v].length;i++){
        this.options2.push({value:this.$store.state.user.course[v][i]})
      }
      if(v){
        var params = new URLSearchParams();
        params.append('ex_class',this.$store.state.user.course[v][0])
        var _this = this;
        axios.post('/experiment/getAllexperiment',params).then(function(res){
          for (var ex of res.data.allEx){
            ex.startDate=ex.startDate.substring(0,10);
            ex.endDate=ex.endDate.substring(0,10);
          }
          _this.tableData1 = res.data.allEx
        })
      }
    },
    tableRowClassName(row, index) {
      if (index === 1) {
        return 'info-row';
      } else if (index === 3) {
        return 'positive-row';
      }
      return '';
    },
    teacher_m(){

      this.$router.push({path: 'teacher_m'})
    },
    collection(){

      this.$router.push({path: 'collection'})
    },
      situation(index){

      this.$router.push({path: 'situation',query:{course:this.value1,title:this.tableData1[index].title}})
  },
    teacherCheck(index){
      this.$router.push({path: 'teacherCheck',query:{title:this.tableData1[index].title}})
    },

    teacherEdit(){

        this.$router.push({path: 'teacherEdit'})
    },
    publish(data){
      if(this.value1){
        this.$router.push({path: 'publish', query : {  course : data }})
      }else{
        alert("请选择班级")
      }
      
    },
    Delete(index){
        this.$confirm('是否删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.$message({
                message: '删除成功',
                type: 'success',
            });
            var params = new URLSearchParams();
            params.append('title',this.tableData1[index].title)
            var _this = this;
            axios.post('/experiment/delExperiment',params).then(function(res){
              _this.tableData1.splice(index,1);
            })
            
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已删除'
            });
        });
      }

  },
  mounted:function(){ 
      var x=1
      var params = new URLSearchParams();
      var user_account = window.localStorage.getItem('user');
      params.append('account',user_account);
      var _this = this;
      axios.post('/user',params).then(function(res){
        _this.$store.commit('user',res.data.signin_user);
        for (var course in _this.$store.state.user.course){
          _this.options1.push({label:_this.$store.state.user.course[course][0],value:"course"+x})
          x++
        }
      })
      

  }


}
</script>

<style >
  .btn22{
    padding-top: 30px;
    margin-bottom:20px;
  }
  .container-med2{
    -webkit-box-shadow:1px 1px 15px rgba(144, 144, 144, 1);
    box-shadow:1px px 15px rgba(144, 144, 144, 1);
    width:1200px;
  }

  .select1{
    padding-top: 30px;
    padding-right: 20px;
    padding-left: 80px;
    display:inline-block;
    float:left;
  }
  .select2{
    padding-top: 30px;
    padding-left: 20px;
    display:inline-block;
    float:left;
  }
  .table1{
    padding-bottom: 50px;
  }
</style>